<template>
    <div class="banner-box">
      <div class="banner">
        <el-carousel height="680px">
          <el-carousel-item v-for="item in bannerList" :key="item._id">
            <div :style="{ height: '680px', background: `url(${item.carousel}) no-repeat center / cover`}"></div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="cq-banner-tip flex w1160">
        <img src="@/assets/img/logo-unfont.png" width=76px height=70px alt="logo-unfont">
        <p class="tip-text fz20">橙券, 是权益营销方案提供商， 为实现品牌-市场-用户的紧密联系提供强有力的智慧支持</p>
        <!-- 按钮 -->
        <BtnMore :BtnColor="color" :IsBtnOrange="isOrange"></BtnMore>
      </div>
    </div>
</template>

<script>
import BtnMore from './btn-more.vue'
export default {
  name: 'CqBanner',
  components: { BtnMore },
  data () {
    return {
      color: '#ff7200',
      isOrange: true,
      bannerList: []
    }
  },
  methods: {
    async getBannerList () {
      const { data } = await this.$req('/indexbanners', 'get')
      this.bannerList = data
    }
  },
  created () {
    this.getBannerList()
  }
}
</script>

<style lang="scss" scoped>

.banner-box {
    position: relative;
    .banner {
        height: 680px;
        :deep(.el-carousel__arrow) {
            width: 60px;
            height: 60px;
            font-size: 16px;
        }
        ::v-deep(.el-carousel__indicators--horizontal) {
            bottom: 55px;
        }
    }
}

.cq-banner-tip {
    justify-content: center;
    align-items: center;
    position: absolute;
    padding: 24px 36px;
    left: 0;
    right: 0;
    bottom: -85px;
    z-index: 10000;
    background-color: white;
    box-shadow: 0 8px 8px #f1f1f1;
    .tip-text {
        padding: 0 50px 0 42px;
        line-height: 70px;
    }
}

</style>
